<template>
	<div class="product-add">
		<!--form表单-->
		<el-form size="small" ref="form" :model="form" label-width="100px">
			<!--基础信息-->
			<Basicm></Basicm>

			<el-drawer v-model="form.isProShow" size="80%"  title="选择商品" >
				<pro></pro>
				<template #footer>
					<div style="flex: auto">
						<el-button @click="cancelSelectPro">取消</el-button>
						<el-button type="primary" @click="confirmSelectPro">确定</el-button>
					</div>
				</template>
			</el-drawer>

			<!--提交-->
			<div class="common-button-wrapper">
				<el-button size="small" type="info" @click="cancelFunc">取消</el-button>
				<el-button
					size="small"
					type="primary"
					@click="onSubmit(0)"
					:loading="loading"
					>保存草稿</el-button
				>

				<el-button
					size="small"
					type="primary"
					@click="onSubmit(1)"
					:loading="loading"
					>立即发布</el-button
				>
			</div>
		</el-form>
	</div>
</template>

<script>
import { addProduct, getBaseData } from "@/api/product.js";
import {addtuan} from "@/api/tuan.js"
import Basicm from "./part/Basic.vue";
import pro from "./part/Pro.vue";
export default {
	components: {
		Basicm,
		pro
	},
	data() {
		return {
			activeName: "basic",
			/*是否正在加载*/
			loading: false,
			/*form表单数据*/
			form: {
				scene: "add",
				dates: [],
				defaultTime: [new Date(), new Date()],
				isProShow: false, //是否显示商品
				selectedRows: [], //选择的商品
				model: {
					name: "", //团购主题
					img: "", //团购主图
					info: [], //团购详情
					time_start: "",
					time_end: "",
					img_type: 0, //商品展示样式
					is_pickup: 0, //是否支持自提
					product_ids: "",
				},

				selectProTable:[],
			},
		};
	},
	provide: function () {
		return {
			form: this.form,
		};
	},
	created() {
		/*获取基础数据*/
		this.getBaseData();
	},
	methods: {
		cancelSelectPro() {

			console.log(222222)
			console.log(this.$refs.proTable)
			// this.form.isProShow = false;	
			// this.$refs.proTable.clearSelection()
		},

		confirmSelectPro() {
			if(this.form.selectedRows.length == 0) {
				ElMessage({
					message: "请选择商品",
					type: "error",
				});	
				return
			}
			// 选中的商品列表去重
			this.form.selectProTable = this.form.selectProTable.concat(this.form.selectedRows).filter((item, index, self) => 
			index === self.findIndex(t => (t.product_id === item.product_id)));
			this.form.isProShow = false
			this.cancelSelectPro()
		},


		/*获取基础数据*/
		getBaseData: function () {
			let self = this;
			getBaseData({}, true)
				.then((res) => {
					self.loading = false;
					Object.assign(self.form, res.data);
				})
				.catch((error) => {
					self.loading = false;
				});
		},

		/*转JSON字符串*/
		convertJson(list) {
			let obj = {};
			list.forEach((item) => {
				obj[item.grade_id] = item.product_equity;
			});
			return JSON.stringify(obj);
		},

		async add(e){
			let proIds = this.form.selectProTable.map((item) => item.product_id);
			this.form.model.product_ids = proIds.length>0? proIds.join(','):'';

			if(!this.form.model.product_ids){
				ElMessage({
					message: "请选择商品!",
					type: "error",
				});
				return
			}

			let params = {
				...this.form.model,
				status:e,
				id:0,
			}
			params.info = JSON.stringify(params.info)
			let {data} = await addtuan(params)
			this.cancelFunc()
		},


		/*提交*/
		onSubmit: function (e) {
			console.log(this.form);
			if (this.form.dates.length > 0) {
				this.form.model.time_start = this.form.dates[0];
				this.form.model.time_end = this.form.dates[1];
			}

			console.log(this.form.model);
			this.add(e)
			return;
			let self = this;
			let params = self.form.model;
			self.$refs.form.validate((valid) => {
				if (valid) {
					if (params.is_delivery_free == 0) {
						params.delivery_id = 0;
					} else {
						if (params.delivery_id == "") {
							ElMessage({
								message: "请选择运费模板",
								type: "error",
							});
							return;
						}
					}
					self.loading = true;
					addProduct(
						{
							params: JSON.stringify(params),
						},
						true
					)
						.then((data) => {
							self.loading = false;
							ElMessage({
								message: "添加成功",
								type: "success",
							});
							self.$router.push("/product/product/index");
						})
						.catch((error) => {
							self.loading = false;
						});
				} else {
					ElMessage({
						message: "请检查必填项是否填写完整",
						type: "error",
					});
				}
			});
		},

		/*取消*/
		cancelFunc() {
			this.$router.back(-1);
		},
	},
};
</script>

<style lang="scss" scoped>
.basic-setting-content {
}

.product-add {
	padding-bottom: 100px;
}

.sku-item {
	display: flex;
	line-height: 2;
	/* border-bottom: 1px solid #eee; */
}

.sku-item-option {
	flex:1;
	display: flex;
	align-items: center;
	justify-content: center;
}


</style>
